<template>
    <header class="header_container">
        <div class="icon_container">
            <img class="icon_image" src="https://platformapi.leyi123.com/Upload/Personal/c1a7ddf02e6844a29ea9470f0cbcddfb.png" alt="" />
            <div class="icon_text">低代码demo</div>
        </div>

        <Column />

        <div class="login_container">
            <div class="btn" @click="clickThemeBtn">{{theme}}</div>
        </div>
    </header>
</template>

<script setup>
import Column from './column.vue';
import { changeTheme } from './changeTheme.js';

const { theme, clickThemeBtn } = changeTheme();
</script>

<style lang="scss">
.header_container {
    grid-area: a;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    border-bottom: 2px solid var(--color-border-root-black);

    .icon_container {
        display: flex;
        height: 100%;
        align-items: center;
        margin-right: 13px;
        padding: 5px 0;

        .icon_image {
            margin: 0 8px 0 20px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        .icon_text {
            font-size: 18px;
            font-weight: bold;
        }
    }

    .login_container {
        width: 200px;
        display: flex;
        align-items: center;
        .btn{
            width: 46px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            cursor: pointer;
            border-radius: 4px;
            color: var(--color-font-root-gray);
            box-shadow: var(--shadow-color-1);
        }
    }
}
</style>
